<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link rel="stylesheet"
	href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引用Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript" src="../js/axios.js"></script>
<script type="text/javascript" src="../js/qs.js"></script>
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<link href="../css/zcss/bootstrap-datepicker3.min.css" rel="stylesheet">
<link href="../css/zcss/switchery.min.css" rel="stylesheet">
<link href="../css/zcss/bootstrap-clockpicker.min.css" rel="stylesheet">
<link href="../css/zcss/bootstrap-table.min.css" rel="stylesheet"
	type="text/css">
<link href="../css/zcss/bootstrap.min.css" rel="stylesheet"
	type="text/css">
<link href="../css/zcss/bootstrap-select.min.css" rel="stylesheet"
	type="text/css">
<link href="../css/zcss/core.css" rel="stylesheet" type="text/css">
<link href="../css/zcss/components.css" rel="stylesheet" type="text/css">
<link href="http://cdn.xtcrm.com/cdn//v7/fm/ub/css/icons.css"
	rel="stylesheet" type="text/css">
<link href="../css/zcss/pages.css" rel="stylesheet" type="text/css">
<link href="../css/zcss/responsive.css" rel="stylesheet" type="text/css">
<link href="../css/zcss/sweetalert.min.css" rel="stylesheet"
	type="text/css">
<link href="../css/zcss/custombox.min.css" rel="stylesheet">
<link href="../css/zcss/animate.min.css" rel="stylesheet"
	type="text/css">
<link href="../css/zcss/css.css" rel="stylesheet" type="text/css">
<script src="../../code/highcharts.js"></script>
<script src="../../code/modules/exporting.js"></script>
<style>
.el-select .el-input {
	width: 110px;
}

.el-table .info-row {
	background: #c9e5f5;
}

text.highcharts-credits {
	display: none;
}
</style>
</head>


<body class="fixed-center" style="height: 1000px;">
	<!-- ============================================================== -->
	<!-- 右侧主体内容开始-->
	<!-- ============================================================== -->
	<div class="content-page crm" style="margin: 0;">
		<div class="content" style="margin: 0;">
			<div class="container-fluid" style="min-height: 900px;">
				<div class="row">
					<div id="idid" class="col-sm-12">
						<el-form :model="ruleForm" ref="ruleForm" class="demo-ruleForm">

						<!----------------筛选、查询input代码开始-------------------->
						<div id="search">

							<div style="height: 50px; width: 500px; margin: 0 auto;" id="app">


								<el-input placeholder="输入主题" v-model="ruleForm.input"
									class="input-with-select"> <el-select
									v-model="ruleForm.selects" slot="prepend" clearable
									placeholder="全部数据"> <!--投诉类型 --> <el-option
									label="产品投诉" value="423"></el-option> <el-option label="客服投诉"
									value="420"></el-option> <el-option label="意见投诉" value="421"></el-option>
								<el-option label="其它投诉" value="422"></el-option> <!-- 服务方式 --> <el-option
									label="非常紧急" value="431"></el-option> <el-option label="急"
									value="432"></el-option> <el-option label="普通" value="433"></el-option>
								<!-- 投诉状态 --> <el-option label="未处理" value="416"></el-option> <el-option
									label="处理中" value="417"></el-option> <el-option label="处理完成"
									value="418"></el-option> </el-select> <el-button slot="append"
									icon="el-icon-search" @click="submitForm('ruleForm')"></el-button>
								</el-input>
							</div>
						</div>
						<!----------------列表-------------------->
						<div id="qlist" style="z-index: 0">
							<div id="editqlist"
								style="position: absolute; display: none; &amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; #9; center: 0; &amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; #9; top: 0; width: 0; &amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; #9; height: 0; z-index: 100; background-color: #D4D0C8;">

							</div>
							<div class="row m-t-15 f-s-12" style="height: 35px;">
								<div class="col-sm-6"></div>
								<div class="col-sm-6 text-right" id="boxcreate">
									<el-button class="btn btn-white waves-effect waves-light"
										type="text" @click="centerDialogVisible = true"> <i
										class="fa fa-plus-circle m-

r-5">新建</i> </el-button>
									<el-dialog title="客户投诉" :visible.sync="centerDialogVisible"
										width="800px" center> <iframe src="/tousuty2"
										width="100%" frameborder="0"
										onload="this.height=this.contentWindow.document.body.scrollHeight,this.width = 
this.contentWindow.document.body.scrollWidth">
									</iframe> </el-dialog>
									
									<el-dialog title="客户投诉" :visible.sync="centerDialogVisible4" width="800px"
							center> <iframe :src="FrameSrc" width="100%"
							onload="this.height=this.contentWindow.document.body.scrollHeight,this.width = this.contentWindow.document.body.scrollWidth"
							frameborder="0" scrolling="no"></iframe> </el-dialog>
							
								</div>

							</div>
						</div>


						<div class="tab-content p-0">
							<div class="bootstrap-table m-t-10">
								<div class="fixed-table-container overflow-x-auto">



									<table class="table table-

bordered table-hover table-z"
										id="qlist_table">
										<thead>
											<tr>
											<th class="th-inner">


													<p>


														<a class="na"
															href="JavaScript:qlist_argv_orderf='id'; qlist_argv_orderv=0;qlist_load();"
															set- lan="html:ID">编号</a>
													</p>


												</th>
												<th class="th-inner">


													<p align="center">


														<a class="na"
															href="JavaScript:qlist_argv_orderf='subject'; qlist_argv_orderv=0;qlist_load();"
															set- lan="html:投诉主题">投诉主题</a>
													</p>


												</th>
												<th class="th-inner">


													<p align="center">


														<a class="na"
															href="JavaScript:qlist_argv_orderf='type'; qlist_argv_orderv=0;qlist_load();"
															set-lan="html:

分类">分类</a>


													</p>


												</th>
												<th class="th-inner">


													<p align="center">


														<a class="na"
															href=""
															>对应客户</a>


													</p>


												</th>
												<th class="th-inner">


													<p align="center">

	<a class="na"
															href=""
															>日期</a>

													

													</p>


												</th>
												
												<th class="th-inner">


													<p align="center">


														<a class="na"
															href="JavaScript:qlist_argv_orderf='exigency'; qlist_argv_orderv=0;qlist_load();"
															set- lan="html:紧急程度">紧急程度</a>


													</p>


												</th>
												<th class="th-inner">


													<p align="center">


														<a class="na"
															href="JavaScript:qlist_argv_orderf='1st_takein'; qlist_argv_orderv=0;qlist_load();"
															set- lan="html:首问接待人">首问接待人</a>


													</p>


												</th>
												<th class="th-inner">


													<p align="center">


														<a class="na"
															href=""
															>处理结果</a>


													</p>


												</th>
												<th class="th-inner">


													<p align="center">
														<a class="na"
															href=""
															>投诉人</a>

														</p>


												</th>
												<th class="th-inner">

													<p align="center">
														<a class="na"
															href=""
															>操作</a>

														</p>


												</th>
											</tr>
										</thead>
										<tbody class="bg-white">


											<tr v-for="(tousu,i) in tableData">
												<td>
													<p align="center">{{ruleForm.totalCount-i-((ruleForm.currentPage-1)*6)}}</p>
												</td>


												<td>


													<p align="center">


														<a id="qlist_F1" onclick=" reportMove(this) ;"
															href='JavaScript:qlist_click_todetail("1","0e34eb");'><i
															class="fa fa-arrow-circle-right text-blue m-r-5"></i>{{tousu.com_name}}</a>


													</p>


												</td>


												<td>


													<p align="center">{{tousu.clazz}}</p>


												</td>


												<td>


													<p align="center">
														<span style="font-weight: normal; color: #9e9e9e">〖</span>{{tousu.cus_name}}


														<a  :href="'/cusview?id=' + tousu.cus_id "><i
															class="fa 

fa-folder-open m-l-5"
															data-original-title="打开详细页面" data-toggle="tooltip" data-
															placement="bottom"></i></a><span
															style="font-weight: normal; color: #9e9e9e">〗</span>
													</p>


												</td>


												<td>
													<p align="center">{{dateFormat(tousu.com_date,1)}}</p>
												</td>
												<td>
													<p align="center">

														<i v-show="tousu.degree ==='普通'" :title="tousu.degree"
															class="f-s-16 md md-looks-1 text-success"
															data-original-title="" data-toggle="tooltip"
															data-title="普通" data-placement="bottom"></i> <i
															v-show="tousu.degree ==='急'" data-toggle="tooltip"
															data-placement="bottom" data-title="急"
															class="f-s-16 md md-looks-2 text-warning"
															data-original-title="" :title="tousu.degree"></i> <i
															v-show="tousu.degree ==='非常急'" data-toggle="tooltip"
															data-placement="bottom" data-title="非常紧急"
															class="f-s-16 md md-looks-3 text-danger"
															data-original-title="" :title="tousu.degree"></i>

													</p>
												</td>
												<td>
													<p align="center">{{tousu.use_name}}</p>

												</td>
												<td>
													<p align="center">



														<i v-show="tousu.result ==='未处理'" data-toggle="tooltip"
															data-placement="bottom" data-title="未处理"
															class="f-s-16 fa fa-exclamation text-warning"
															:title="tousu.result"></i> <i
															v-show="tousu.result ==='处理中'" :title="tousu.result"
															class="f-s-16 fa fa-arrow-right text-primary"
															data-toggle="tooltip" data-title="处理中"
															data-placement="bottom"></i> <i
															v-show="tousu.result ==='处理完成'" :title="tousu.result"
															data-toggle="tooltip" data-placement="bottom"
															data-title="处理完成" class="f-s-16 fa fa-check text-custom"></i>

													</p>
												</td>
												<td>

													<p align="center">
														<span style="font-weight: normal; color: #9e9e9e">〖</span>{{tousu.lin_name}}


														<a
															href="javascript:vopen('/xcrm/customer/contact/detail.xt?id=125','contact125',999,600);"><i
															class="fa 

fa-folder-open m-l-5"
															data-original-title="打开详细页面" data-toggle="tooltip" data-
															placement="bottom"></i></a><span
															style="font-weight: normal; color: #9e9e9e">〗</span>
													</p>
												</td>


												<td width="1%" nowrap=""><el-button type="text"
														@click="delgood(tousu.com_id)" icon="el-icon-delete"></el-button>

													&nbsp; <el-button icon="el-icon-edit" type="text"
														@click="editRow(tousu.com_id)"></el-button></td>



											</tr>

										</tbody>
									</table>




								</div>
							</div>

							<div class="row m-t-10">
								<div class="col-sm-3">
								</div>

								<div class="col-sm-7">
									&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;
									<el-pagination @size-change="handleSizeChange"
										@current-change="handleCurrentChange"
										:current-page="ruleForm.currentPage"
										:page-sizes="[10, 20, 30, 40]" :page-size="ruleForm.pagesize"
										layout="prev, pager, next, jumper"
										:total="ruleForm.totalCount"> </el-pagination>
								</div>

								<div class="col-sm-2 text-right"
									style="text-align: center !important; margin-top: 10px; font-size: 15px; font-weight: bold;">
									<span>售后投诉</span> <small class="text-muted font-13">{{ruleForm.totalCount}}条</small>
								</div>
							</div>

						</div>
						</el-form>

					</div>
					<script>
				var vm = new Vue({
					el: "#idid",
					data() {
						return {
							texts: "",
							centerDialogVisible: false,
							centerDialogVisible1: false,
							centerDialogVisible2: false,
							centerDialogVisible3: false,
							centerDialogVisible4: false,
							//表格当前页数据
			                tableData: [],
			                FrameSrc:"",
							ruleForm: {
								//搜索框
								input: '',
								//下拉条件按钮
								selects: '',
								 //默认每页数据量
				                pagesize:6,

				              //当前页码
				                currentPage: 1,
				                //默认数据总数
				                totalCount: 0,
						        }
						}
					},
					methods: {
						//从服务器读取数据
		                loadData: function(){  
		                	var iosnn=this;
		                	//post提交数据
							axios.post("/afterSale/kehutousu",
								//参数转换
								Qs.stringify(this.ruleForm, {
									arrayFormat: 'brackets'
								})		
							).then(function(v) {
								
								iosnn.tableData = v.data.list;
								iosnn.ruleForm.totalCount = v.data.total;
								 console.info(v.data); 
								 
							}).catch(function(e) {
								alert("出错了"+e);
							});
		                },
						handleSizeChange(val) {
		                	this.ruleForm.pagesize = val;
					        console.log( this.ruleForm.pagesize+'条');
					        this.loadData();
					      },
					      handleCurrentChange(val) {
					    	  this.ruleForm.currentPage = val;
					        console.log(this.ruleForm.currentPage+'当前');
					        this.loadData();
					       
					      },
						submitForm(formName) {	
									this.loadData();
							
						},
						resetForm(formName) {
							this.$refs[formName].resetFields();
						},
						 //   时间格式化
			         	dateFormat:function(time,i) {
							    var date=new Date(time);
							    var year=date.getFullYear();
							    /* 在日期格式中，月份是从0开始的，因此要加0
							     * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
							     * */
							    var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
							    var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
							    var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
							    var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
							    var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
							    // 拼接
							  //  return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
							    
							    if(i == 1){
							    	return year+"-"+month+"-"+day;
							    }else{
							    	return hours+":"+minutes+":"+seconds;
							    }
							    
							},
							
							delgood:function(c_id){
						    	  var r = confirm("您是否确认删除");
									if (r == true) {
										axios.post("/delTousu",
							           			//参数转换
							           			Qs.stringify({'c_id':c_id},{arrayFormat: 'brackets'})
							           			//ajax请求成功的回调函数
							           			).then(function(v){
								           			window.location.replace("/getTousuty");
								           	}).catch(function(e){
								           		alert("出错了"+e);
								           	});
							}
						      },
						      
						      editRow(id){
						    	    this.centerDialogVisible4 = true;
									this.FrameSrc="/tousuEditor?id="+id;
								}
					}, 
					mounted() {
						var iosnn=this;
						//post提交数据
						axios.post("/tousuty",
							//参数转换
							Qs.stringify(this.ruleForm, {
								arrayFormat: 'brackets'
							})		
						).then(function(v) {
							iosnn.tableData = v.data.list;
							iosnn.ruleForm.totalCount = v.data.total;
							 console.info(iosnn.tableData); 
						}).catch(function(e) {
							alert("出错了"+e);
						});
					}
					
				});
			</script>


				</div>
				<!----------------统计-------------------->
				<div>
					<div id="container"
						style="width: 50%; height: 400px; margin: 0 auto; float: left;"></div>
					<div id="container1"
						style="width: 50%; height: 400px; margin-top：50px; float: right;"></div>
				</div>
				<script type="text/javascript">
var mv = ${tousucalzz} 
var carrierName=[];//横坐标
var series=[{
        name: '客服投诉',
        id:420,
        data: []

    }, {
        name: '意见投诉',
        id:421,
        data: []

    }, {
        name: '其他投诉',
        id:422,
        data: []

    },{
        name: '产品投诉',
        id:423,
        data: []

    }
    ]


//条形图
$(function(){ 
	
	mv.forEach(v=>{
		if(v.length>0){
			var myv = v;
			v.forEach(u=>{
				if(carrierName.indexOf(u.releaseYearMonth)==-1){
					carrierName.push(u.releaseYearMonth);
					series.forEach(a=>{
						a.data.push(0);
					})
				}
			});
		}
	});
	mv.forEach(v=>{
		if(v.length>0){
			v.forEach(u=>{
				var i=carrierName.indexOf(u.releaseYearMonth);
				series.forEach(a=>{
					if(a.id==u.type){
						a.data[i]=u.count;
					}
				});
			})
		}
	});
	
var chart = Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: '近6个月平均投诉量'
    },
    subtitle: {
        text: ''
    },
    xAxis: {
        categories: carrierName,
        crosshair: true
    },
    yAxis: {
        min: 0,
        title: {
            text: '投诉量 (次)'
        }
    },
    tooltip: {
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y:.1f} 次</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0
        }
    },
    series: series
});	
	
})


var tousuresult = ${tousuresult}
var re1 = 0;
var re2 = 0;
var re3 = 0;
var re4 = 0;
for(var i = 0; i<tousuresult.length;i++){
	if(tousuresult[i].result == 415){
		re1 = tousuresult[i].count;
	}else if(tousuresult[i].result == 416){
		re2 = tousuresult[i].count;
	}else if(tousuresult[i].result == 417){
		re3 = tousuresult[i].count;
	}else if(tousuresult[i].result == 418){
		re4 = tousuresult[i].count;
	}
}

//饼图
var pei = Highcharts.chart('container1', {
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: 0,
        plotShadow: false
    },
    title: {
        text: '处理结果分布',
        align: 'center',
        verticalAlign: 'middle',
        y: 40
    },
    tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
        pie: {
            dataLabels: {
                enabled: true,
                distance: -50,
                style: {
                    fontWeight: 'bold',
                    color: 'white'
                }
            },
            startAngle: -90,
            endAngle: 90,
            center: ['50%', '75%']
        }
    },
    series: [{
        type: 'pie',
        name: '每个季度投诉结果占比',
        innerSize: '50%',
        data: [
        	['无需处理',re1],
            ['未处理',re2],
            ['处理中',re3],
            ['处理完成',re4],
            {
                name: 'Proprietary or Undetectable',
                y: 0.2,
                dataLabels: {
                    enabled: false
                }
            }
        ]
    }]
});






		</script>


			</div>
		</div>
	</div>
</body>
<!--UTF8-->
</html>
